<template>
  <div class="search">
    <div class="searchs">
      <input type="search" placeholder="输入城市或拼音" v-model="keywords"/>
    </div>
    <ul class="sear" v-show="keywords !== '' ">
      <div>
        <li class="border-bottom" v-for="item of resultList" :key="item.id" @click="changClick(item.name)">{{item.name}}</li>
        <li v-if="resultList == '' ? true : false">没有找到数据</li>
      </div>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
    list: Object
  },
  data () {
    return {
      keywords: '',
      resultList: []
    }
  },
  methods: {
    changClick (city) {
      this.$store.dispatch('changCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    let wrappers = document.querySelector('.sear')
    this.scroll = new BScroll(wrappers)
  },
  watch: {
    keywords () {
      let result = []
      for (let key in this.list) {
        this.list[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.keywords) !== -1 || obj.name.indexOf(this.keywords) !== -1) {
            result.push(obj)
          }
        })
      }
      this.resultList = result
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .searchs
    background #EEEEEE
    width 100%
    height 0.88rem
    line-height 0.88rem
    text-align center
    overflow hidden
    position fixed
    top 0.88rem
    z-index 2
  .searchs
    input
      width 98%
      padding 0.1rem 0
      text-align center
      border-radius 0.06rem
  .sear
    position absolute
    background #E4E7EA
    top 1.76rem
    left 0
    right 0
    bottom 0
    z-index 1
    li
      background white
      line-height 0.6rem
      padding-left 0.2rem
</style>
